<template>
  <div class="palyControl">
    <!-- 左边 -->
    <div class="left" @click="isShow = !isShow">
      <img
        :src="store.state.playList[store.state.currentIndex].al.picUrl"
        alt=""
      />
      <div class="content">
        <div class="title">
          {{ store.state.playList[store.state.currentIndex].name }}
        </div>
        <div class="tips">横滑可以切换上下首歌</div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <svg class="icon" aria-hidden="true" @click="playMusic" v-if="isPlay">
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg v-else class="icon" aria-hidden="true" @click="playMusic">
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gedan"></use>
      </svg>
    </div>
    <PlayMusic
      v-show="isShow"
      :musicInfo="store.state.playList[store.state.currentIndex]"
      :isPlay="isPlay"
      :playMusic="playMusic"
      :lyric="state.lyric"
      @back="isShow = !isShow"
    />
    <!-- MP3 -->
    <audio
      ref="myAuido"
      :autoplay="isAutoplay"
      loop
      :src="`https://music.163.com/song/media/outer/url?id=${
        store.state.playList[store.state.currentIndex].id
      }.mp3 `"
    ></audio>
  </div>
</template>

<script>
import {
  onMounted,
  reactive,
  getCurrentInstance,
  ref,
  defineProps,
  watchEffect,
  watch,
} from 'vue'
import { useRoute } from 'vue-router'
import { ctreateNamespaceHelpers, useStore } from 'vuex'
// const { mapState, mapMutations } = ctreateNamespaceHelpers()
import PlayMusic from '@/components/PlayMusic'
export default {
  name: 'PalyControl',
  components: {
    PlayMusic,
  },
  computed: {
    // ...mapState(() => {
    //   playList: (state) => state.playList
    //   currentIndex: (state) => state.currentIndex,
    // }),
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const state = reactive({
      lyric: '',
    })
    const myAuido = ref(null)
    const isAutoplay = ref(false)
    let isPlay = ref(true)
    let isShow = ref(false)
    let playMusic = () => {
      if (myAuido.value.paused) {
        myAuido.value.play()
        isPlay.value = false
      } else {
        myAuido.value.pause()
        isPlay.value = true
      }
    }
    // 控制是否自动播放
    watch(
      () => store.state.currentIndex,
      (newValue, oldValue) => {
        if (isPlay.value == false) {
          isAutoplay.value = true
        } else {
          isAutoplay.value = false
        }
      }
    )
    return {
      store,
      myAuido,
      isPlay,
      isShow,
      playMusic,
      state,
      isAutoplay,
    }
  },
}
</script>
<style lang="less" scoped>
.palyControl {
  width: 100%;
  height: 1.2rem;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  .left {
    flex: 7;
    display: flex;
    padding: 0 0.2rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 0.4rem;
    }
    .content {
      padding: 0 0.2rem;
      .title {
        padding: 0.2rem 0;
      }
      .tips {
        font-size: 0.2rem;
        color: #999;
      }
    }
  }
  .right {
    flex: 3;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      margin: 0 0.2rem;
    }
  }
}
</style>